<template>
  <div class="container">
    <el-row style="padding: 20px">
      <el-col :span="12">
        <div style="color: aliceblue">数 字 档 案 馆 - 知 识 管 理 系 统</div>
      </el-col>
      <el-col
        :span="2"
        :push="2"
        :offset="9"
      >
        <!-- <el-dropdown> -->
        <span class="el-dropdown-link">
          <div class="login-button" @click="login"><i class="el-icon-user-solid" />登录</div>
        </span>
        <!-- <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <div @click="staffLogin"><i class="el-icon-user" />员工登录</div>
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click="login"><i class="el-icon-reading" />管理员登录</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      </el-col>
    </el-row>
    <div class="page white-bg">
      <el-container>
        <el-header style="text-align: center; margin-top: 20px">
          <el-input v-model="searchForm.archTitle" class="search-input">
            <template #suffix>
              <el-button round type="primary" @click="search()">检索</el-button>
            </template>
          </el-input>
          <div class="result-text">
            共搜索到 <span style="color: #3b6ad4">{{ page.total }}</span> 条结果
          </div>
        </el-header>

        <el-container style="height: 70vh">
          <el-aside class="white-bg" width="200px">
            <el-menu
              :default-active="curACType"
              class="el-menu-vertical-demo"
              @select="handleSelect"
            >
              <el-menu-item
                v-for="(item, index) in ACList"
                :key="index"
                :index="item.index"
              >
                <span slot="title">{{ item.archCateName }}</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <div class="table">
              <div v-for="(item, index) in listData" :key="item.archMainId">
                <div class="item-title">
                  {{ index + 1 }}. 【 {{ item.archTitle }} 】
                </div>
                <div class="content">
                  保管期限:{{
                    item.archPeriod === 0 ? "永久" : item.archPeriod + "月"
                  }}; 密级:
                  {{ item.accessState === 0 ? "公开" : "隐藏" }} 宗号:{{
                    item.archMainCode | parcelNumber
                  }}; 卷号:{{ item.archMainCode | volumeNumber }}; 年度:{{
                    item.archMainCode | year
                  }};
                </div>
              </div>
            </div>
            <div class="pagination">
              <el-pagination
                :current-page.sync="page.pageNum"
                :page-sizes="[10, 20, 50]"
                :page-size="page.pageSize"
                layout="sizes, total, prev, pager, next"
                :total="page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import { getAllCategory } from '@/api/archCategory'
import { qryAllArchMainByType } from '@/api/archManage'
export default {
  filters: {
    // 宗号
    parcelNumber(value) {
      return value.slice(11, 15)
    },
    // 卷号
    volumeNumber(value) {
      return value.slice(16, 19)
    },
    // 年度
    year(value) {
      return value.substr(0, 4)
    }
  },
  data() {
    return {
      isLoading: false,
      searchInput: '',
      curACType: '0',
      ACList: [],
      listData: [], // 档案列表
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      searchForm: {
        archTitle: '',
        archPeriod: -1,
        archDeptCode: '',
        username: '',
        staffCode: '',
        visitCount: 0,
        borrowCount: 0,
        submitYear: '',
        archDeptHotName: ''
      }
    }
  },
  created() {
    this.getAllCategory()
  },
  methods: {
    // 获取分类列表
    getAllCategory() {
      getAllCategory({
        pageNum: -1,
        pageSize: -1
      }).then((res) => {
        if (res.code === '0') {
          const list = [
            {
              archCateCode: '',
              archCateId: 16,
              archCateName: '全部'
            }
          ]
          this.ACList = list.concat(res.data.records)
          this.ACList.map((item, index) => {
            // el-menu-item的index只接受string类型不接受int型
            item.index = index.toString()
          })
          this.getData()
        }
      })
    },
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const curACType = parseInt(this.curACType)
      const param = {
        archCateCode: this.ACList[curACType].archCateCode,
        accessState: '0', // 0=公开
        archState: '5,10', // 5=归档接受
        ...this.searchForm,
        pageNum: pageNum,
        pageSize: pageSize
      }
      qryAllArchMainByType(param)
        .then((res) => {
          if (res.code === '0') {
            this.listData = res.data.records
            this.page.total = parseInt(res.data.total)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 检索
    search() {
      this.getData()
    },

    login() {
      this.$router.push('/login')
    },
    staffLogin() {
      this.$router.push('/staffLogin')
    },
    handleSelect(val) {
      this.curACType = val
      this.getData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100%;
  width: 100%;
  background: linear-gradient(-170deg, #004bbc, #4285f4, #f6f7fb, #ebeced);
  overflow: hidden;
}

.page {
  height: 100%;
  width: 98vw;
  background: #f3f3f3;
  overflow: hidden;
  margin: 0 1%;
  border-radius: 5px;
  padding: 10px;
}

.result-text {
  margin-top: 5px;
  font-size: 14px;
  color: #b5b6ba;
}

.login-button {
  cursor: pointer;
  color: aliceblue;
}

.white-bg {
  background: white;
}

::v-deep .search-input .el-input__inner {
  border-radius: 50px;
  border: 2px solid #dcdfe6;
  width: 60vw;
  padding-right: 1px;
}

::v-deep .search-input .el-input__suffix {
  right: 17vw;
}
.item-title {
  font-size: 16px;
  font-weight: bold;
}
.content {
  padding-top: 10px;
  padding-bottom: 20px;
  font-size: 12px;
  color: #9ca5b9;
}
</style>
